<html>
<head>
  <title>hellodashboard</title>
  <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  <script type='text/javascript'>
   google.load('visualization', '1', {'packages': 
     ['geochart']});
   google.setOnLoadCallback(drawMarkersMap);

   geodata = {{ data }}

    function drawMarkersMap() {
	  if (! geodata) return;
      var data = new google.visualization.DataTable(geodata);
   
      var options = {
        region: 'US',
        displayMode: 'region',
        resolution: 'provinces',
        width: '800'
      };

      var chart = new google.visualization.GeoChart(
        document.getElementById('chart_div'));
      chart.draw(data, options);
    };
  </script>
</head>
<body>
  <h2>Hello Dashboard!</h2>
  <div id='chart_div'></div>
  <p>A simple example of a graphical dashboard, backed by Google's BigQuery and running in Python on App Engine.</p>
  <p>Click on the map to highlight the value of each state, as generated by this query:</p>
  <pre> {{ query }} </pre>
</body>
</html>
